<template>
  <el-row :gutter="20">
    <el-col :span="8">
      <el-card class="profile-card">
        <template #header> 个人信息 </template>
        <div class="avatar">
          <Thumb :height="'100px'" :width="'100px'" :image="userStore.user.avatarUrl || defaultUrl">
            <div>Hello</div>
            {{ userStore.user.username }}
          </Thumb>
        </div>
        <ul>
          <li class="flex between center">
            <div class="flex gap"><my-icon icon="icon-nicheng" /> 昵称</div>
            <span>{{ userStore.user.nickname }}</span>
          </li>
          <li class="flex between center">
            <div class="flex gap"><my-icon icon="icon-user" /> 用户名</div>
            <span>{{ userStore.user.username }}</span>
          </li>
          <li class="flex between center">
            <div class="flex gap"><my-icon icon="icon-juese" /> 所属角色</div>
            <span>{{ userStore.user.role }}</span>
          </li>
          <li class="flex between center">
            <div class="flex gap"><my-icon icon="icon-zhuangtai" /> 激活状态</div>
            <span>{{ userStore.user.status }}</span>
          </li>
        </ul>
      </el-card>
    </el-col>
    <el-col :span="16">
      <el-card>
        <template #header> 基本信息 </template>
        <el-tabs v-model="activeName">
          <el-tab-pane label="基本资料" name="info">
            <UserInfo />
          </el-tab-pane>
          <el-tab-pane label="修改密码" name="password">
            <Password />
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup lang="ts" name="profile">
import { ref } from 'vue'
import { useUserStore } from '@/store/user'

import Password from './components/Password.vue'
import UserInfo from './components/UserInfo.vue'
import Thumb from '@/components/Thumb/index.vue'

import defaultUrl from '@/assets/avatar.gif'

const userStore = useUserStore()
const activeName = ref('info')
</script>

<style scoped lang="scss">
.profile-card {
  .avatar {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
  }
  ul {
    list-style: none;
    padding: 0;
    li {
      padding: 12px 0;
      border-bottom: 1px solid #f0f0f0;
      &:last-child {
        border-bottom: none;
        padding-top: 12px;
      }
      span {
        float: right;
      }
    }
  }
}
</style>
